<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snake</title>
    <script src="js/jquery.min.js"></script>
    <style>
        body{
            background-image: url(./bg.png);
        }
        .box{
            position: absolute;
            left:50%;
            margin-left: -180px;
            top:50%;
            margin-top: -310px;
            border:10px solid transparent;
            -webkit-border-image:url(wall.png) 30 30 round; /* Safari 5 */
            -o-border-image:url(wall.png) 30 30 round; /* Opera */
            border-image:url(wall.png) 30 30 round;
        }
        .title{
            width: 360px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            font-size: 32px;
            font-weight: 600;
        }
        .score{
            position: relative;
            margin-left: 280px;
            margin-top: 30px;
            font-size: 16px;
            font-weight: 200;
        }
        .img_btn{
            position: absolute;
            display: block;
            bottom: 10px;
            right: 50px;
            width: 200px;
            height:170px;
            margin: auto;
        }
    </style>
</head>
<body>
	<div class="title">贪吃蛇大战小游戏<div id="title" class="score">得分:0分</div></div>
    <img src="start.png" class="img_btn" id="start"/>
<canvas id="myCanvas" width="360" height="620" class="box">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
    var ctx=document.getElementById("myCanvas").getContext("2d");
    var title = $('#title');
    var r = [{x:100,y:30}];//竖的坐标
    var co=40;
    var speed = 10;//初始化速度
    var e=null;
    var l=null;//鼠标方位
    var s1;
    var s2;
    var score = 0;
    ctx.fillStyle='red';
    var img = new Image();
    $(document).ready(function(){
        img.src = './fruit.png';
    	int();//初始化数据
    	s1 = setInterval(start,speed);//定时器
    	$('body').mousemove(function(e) { 
			var x = e.originalEvent.x || e.originalEvent.layerX || 0; 
			var y = e.originalEvent.y || e.originalEvent.layerY || 0; 
			l = {y:y,x:x};
		});
        $('#start').click(function(){
            r = [{x:100,y:30}];//竖的坐标
            score = 0;
            co=40;
            e=null;
            l=null;//鼠标方位
            speed = 10;//初始化速度
            int();//初始化数据
            s1 = setInterval(start,speed);//定时器
        });
    });
    document.onkeyup = function(event){

    };
    document.onkeydown = function(){
    	if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){
            co = event.keyCode;
        }
    };
    function start(){
        stop();//结束
        eat();//吃果实
        r.unshift(r.pop());//尾接到头
        keyboard();//键盘控制
        clear();
        fruit();//画果实
        snake();//画蛇
    }
    //初始化数据
    function int(){
    	for(var i=1; i<20; i++){
    		var temp = {x:100,y:r[0].y+1};
    		r.unshift(temp);
    	}
    }
    //吃到果实，增加身体长度
    function add(){
    	for(var i=0; i<5; i++){
    		var temp1;
    		switch(co){
            case 37:
                temp1 = {x:r[0].x-1,y:r[0].y};
                break;
            case 38:
                temp1 = {x:r[0].x,y:r[0].y-1};
                break;
            case 39:
                temp1 = {x:r[0].x+1,y:r[0].y};
                break;
            case 40:
                temp1 = {x:r[0].x,y:r[0].y+1};
                break;
            }
    	    r.unshift(temp1);
    	}
    }
    //头吃到身
    function check(e,j){
        for(var i=0;i<r.length;i++){
            if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
        }
        return false;
    }
    //停止
    function stop(){
    	if( r[0].x < 0 || r[0].x >= 350 || r[0].y < 0 || r[0].y >= 610){
            clearInterval(s1);
            alert("game over!");
            return false;
        }//咬到自己或碰到墙壁，不再执行
    }
    //键盘控制
    function keyboard(){
    	 r[0].x = r[1].x;
    	 r[0].y = r[1].y;
    	 switch(co){
            case 37:
                r[0].x = r[1].x - 1;
                break;
            case 38:
                r[0].y = r[1].y - 1;
                break;
            case 39:
                r[0].x = r[1].x + 1;
                break;
            case 40:
                r[0].y = r[1].y + 1;
                break;
        }
    }
    //加速
    function fly(){
        console.log('加速');
        console.log(speed);
        if(speed > 0.5){
            speed=speed-0.5;//加速
        }
    }
    //吃果实
    function eat(){
    	if(e){
            if(r[0].y>=e.y-18&&r[0].y<=e.y+18&&r[0].x<=e.x+18&&r[0].x>=e.x-18){
                add();//碰到果实加到蛇身长度
                var color = ['red','blue','black','orange','yellow','grey'];
                ctx.fillStyle = color[Math.floor(Math.random()*7)];
                e=null;//把果实清空
                score += 10;
                title.text('得分:'+score+'分');
                fly();
            }
        }
    }
    //画果实
    function fruit(){
        if(e)ctx.drawImage(img,e.x,e.y,20,20);
    	while(e==null || check(e)){
            e={y:(Math.random()*610 >>>0),x:(Math.random()*350 >>>0)};
        }
    }
    //画蛇
    function snake(){
	    for(var i=0;i<r.length;i++){
	        ctx.fillRect(r[i].x,r[i].y,10,10);
	    }
    }
    //清理画布
    function clear(){
    	ctx.clearRect(0,0,360,620);//清空画布
    }
</script>
</body>
</html>